<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<body>
    <div th:fragment="roleIndex">
        <template id="roleIndex">
            <div>
                <el-row class="RoleIndex_elRow">
                    <el-col :span="1" class="RoleIndex_elRow_col">
                        <el-button title="增角色" @click="addRoleBtnHandle" type="success" size="mini">增</el-button>
                    </el-col>
                    <el-col :span="5" style="padding-right: 5px">
                        <el-date-picker style="width: fit-content" v-model="searchInfo.searchAllDate" value-format="yyyyMMdd" v-on:change="pickHandle" type="daterange" size="mini" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
                    </el-col>
                    <el-col :span="5">
                        <el-input size="mini" v-on:keyup.enter.native="handleEnter" v-model="searchInfo.seaInfo" placeholder="请输入内容，按Enter搜索..." suffix-icon="el-icon-search"></el-input>
                    </el-col>
                </el-row>
                <el-table v-bind:data="tableData" title="双击单元格关联用户" size="mini" stripe @row-dblclick="doubleClickRoleTableHandle">
                    <el-table-column label="代码" prop="code"></el-table-column>
                    <el-table-column label="名称" prop="name"></el-table-column>
                    <el-table-column label="上级代码" prop="upLevelCode"></el-table-column>
                    <el-table-column label="是否末级" prop="isLeaf"></el-table-column>
                    <el-table-column label="创建时日" prop="createDateTime"></el-table-column>
                    <el-table-column label="更新时日" prop="updateDateTime"></el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button v-on:click="handleEdit(scope.$index, scope.row)" title="编辑" size="mini" icon="el-icon-edit" type="primary" circle></el-button>
                            <el-popconfirm @confirm="confirmDeleteRoleHandle(scope.$index, scope.row)" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="是否确定删除？">
                                <el-button slot="reference" title="删除" size="mini" icon="el-icon-delete" type="danger" circle></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination align="left" size="mini" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="20" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" style="pupdateing: 5px"></el-pagination>
                <add-role-modal :show_add_role_modal="isAddRoleShowModal" @add_role_modal_close="addRoleModalColse"></add-role-modal>
                <updated-role-modal :show_updated_role_modal="isUpdatedRoleShowModal" @updated_role_modal_close="updatedRoleModalColse"></updated-role-modal>
                <relation-role-modal :show_relation_role_modal="isRelationRoleShowModal" @relation_role_modal_close="relationRoleModalClose"></relation-role-modal>
            </div>
        </template>
        <script type="text/javascript" th:src="@{/this/js/system/role/RoleIndex.js}"></script>
        <link rel="stylesheet" th:href="@{/this/css/RoleIndex.css}"/>
    </div>
</body>
</html>